<!--
	按钮组切换
	Created by Penglei on 2023/08/16
-->
<template>
	<div class="tab-buttons">
		<el-button v-for="(item, index) in props.list" :key="index" :class="{ active: active == item.value }" size="large"
			@click="onClick(item)">
			{{ item.name }}
		</el-button>
	</div>
</template>

<script setup name="TabButtons">
// 组件事件监听
const emit = defineEmits();
// 父组件传参
const props = defineProps({
	list: {
		type: Array,
		required: false,
		default: () => []
	}
});

// 当前选择按钮
let active = ref(0);
// 按钮点击事件
const onClick = (item) => {
	active.value = item.value;
	// 调用组件事件
	emit('onBtnClick', item);
}
</script>

<style lang="scss" scoped>
.tab-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	margin: 30px auto;

	.el-button {
		height: 55px;
		line-height: 55px;
		border: none;
		padding: 0 20px;
		margin: 0 15px;
		text-align: center;
		background-color: rgb(3, 34, 162);
		color: rgb(65, 144, 253);
		font-size: 30px;

		&.active {
			color: #46FFFF;
		}
	}
}
</style>